2

pug学习

jade(pug)
由于商标版权问题,jade已经改名为Pug。
Pug 是一个高性能的模板引擎,它是用 JavaScript 实现的,并且可以供 Node 使用,当然还支持其他语言。

文件后缀名为.pug(.jade)

pug优点

  • 可读性高
  • 灵活的缩进
  • 块展开
  • 代码默认经过编码处理(转义),安全性高
  • 运行时和编译时上下文错误报告
  • 支持命令行编译
  • 支持html5模式
  • 在内存中缓存(可选)
  • 原生支持 Express
  • 合并动态和静态标签类
  • 过滤器

安装

npm安装 建议安装个nrm来进行源管理

npm install pug -g
npm install pug-cli -g

测试demo

为了方便编写代码,最好把编译器的tab设置:2.

// index.jade

doctype html
html
  head
    title jade test
  body
    h2 jade study

粗暴的编译方法

// index.html
<!DOCTYPE html><html><head><title>jade test</title></head><body><h2>jade study    </h2></body></html>

发现编译后的代码不具备可读性

pug -- help
 Options:
     -P, --pretty           compile pretty HTML output ## 输出漂亮结构的HTML
    -D, --no-debug         compile without debugging (smaller functions) ## 不带调试的编译
    -w, --watch            watch files for changes and automatically re-render ## 对某个文件的变动保持监控
    -E, --extension <ext>  specify the output file extension ## 指定输出文件扩展名
    -s, --silent           do not output logs ## 不输出日志
// 重新编译
pug -P index.jade
<!DOCTYPE html>
<html>
  <head>
    <title>jade test</title>
  </head>
  <body>
    <h2>jade study    </h2>
  </body>
</html>

自动编译
只是为了学习,这里只要设置-w -P .开发中通过打包工具来进行自动编译.

pug pug -o . -w -P

酷酷的波
467 声望7 粉丝

« 上一篇
H5多列布局
下一篇 »
css前端初始化